<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 5px' }">
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">教程攻略</span>

        <div class="rjfl-tabs">
          <div
            class="tab"
            :class="{ act: act.name == it.name }"
            v-for="it in tabs"
            :key="it.name"
            @mouseover="act = it"
          >
            <span>{{ it.name }}</span>
          </div>
        </div>

        <span class="rjfl-more" @click="gotoRouter(
          '/information/list.html',
          $router,
          {
            firstId: '386',
            secondId: '412',
            thirdId: '0',
            param: act.name==='游戏攻略'?'386_412_0':'386_399_0',
            type: '0',
          },'information-list')"
          >更多
          
        </span>
      </div>
    </template>

    <div class="tutorials">
      <div class="tutorials-left">
        <div class="tutorials-left-t">
          <div class="big-one" v-if="leftValue[0]">
            <img :src="leftValue[0].imgUrl" @click="gotoInfoDetail(leftValue[0].id)"/>
            <div>
              <span :title="leftValue[0].titleOne">{{ leftValue[0].titleOne }}</span>
            </div>
            &nbsp;
          </div>
          <div class="small-four">
            <div class="small-one" v-for="i in 4" :key="i">
              <img :src="leftValue[i].imgUrl" @click="gotoInfoDetail(leftValue[i].id)"/>
              <div>
                <span :title="leftValue[i].titleOne">{{ leftValue[i].titleOne }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tutorials-left-b">
          <div v-for="i in 9" :key="i">
            <span @click="gotoInfoDetail(leftValue[i + 4].id)" :title="leftValue[i + 4].titleOne">{{ leftValue[i + 4].titleOne }}</span>
          </div>
        </div>
      </div>
      <div class="tutorials-right">
        <HotTutorialList :data="rightValue" />
      </div>
    </div>
  </el-card>
</template>

<script setup>
import HotTutorialList from "./HotTutorialList.vue";
import { ref, computed, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
const route = ref(useRoute());
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const gotoInfoDetail = (id) => {
  router.push({
    name: "information-detail",
    params: { id: id },
  });
};
const tabs = ref([
  {
    name: "游戏攻略",
    tjkey: "gameRecommendIntroductionVos",
    hotkey: "gameHotIntroductionVos",
  },
  {
    name: "软件教程",
    tjkey: "softRecommendCourseVos",
    hotkey: "softHotCourseVos",
  },
]);
const act = ref(tabs.value[0]);

const leftValue = computed(() => props.data[act.value.tjkey]);
const rightValue = computed(() => props.data[act.value.hotkey]);
</script>

<style lang="less" scoped>
@one-width: 260px;
@small-four: 535px;

.tutorials {
  display: flex;
  justify-content: space-between;

  &-left {
    width: 70%;
    display: flex;
    flex-direction: column;

    &-b {
      display: flex;
      flex-flow: wrap;
      flex-wrap: row;
      justify-content: space-between;
      div {
        width: calc(@one-width + 15px);
        display: flex;
        // align-items: flex-start;
        // justify-content: center;
        height: 32px;
        span {
          // display: flex;
          // align-items: center;
          cursor: pointer;
          width: 300px;
          font-size: 14px;
          font-weight: 400;
          color: #1d2127;
          line-height: 32px;
          overflow: hidden;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
        span:hover {
          color: @link-color;
        }
        &:before {
          height: 32px;
          display: flex;
          align-items: center;
          content: "·";
          color: #f9b002;
          font-size: 32px;
        }
      }
    }

    &-t {
      display: flex;
      justify-content: space-between;
      padding: 10px;

      .big-one {
        display: flex;
        position: relative;
        flex-direction: column;
        border-radius: 8px;
        width: @one-width;
        height: 256px;
        cursor: pointer;
        img {
          position: absolute;
          width: @one-width;
          height: 256px;
          object-fit: cover;
          border-radius: 8px;
        }

        div {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          position: absolute;
          bottom: 0;
          height: 32px;
          width: @one-width;
          background: linear-gradient(
            180deg,
            rgba(62, 69, 79, 0) 0%,
            rgba(44, 49, 57, 0.6) 52%,
            #1d2127 100%
          );
          border-radius: 0px 0px 4px 4px;

          span {
            font-size: 14px;
            font-weight: 400;
            width: @one-width;
            color: #ffffff;
            line-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis; //文本溢出显示省略号
            white-space: nowrap; //文本不会换行
          }
        }

        &:hover {
          width: calc(@one-width + 5px);
          transition: all 0.1s;
          img {
            opacity: 0.6;
            width: calc(@one-width + 5px);
            height: 260px;
            transition: all 0.1s;
          }
          div {
            width: calc(@one-width + 5px);
            bottom: -5px;
            transition: all 0.1s;
          }
          span {
            color: @link-color;
          }
        }
      }
      .small-four {
        display: flex;
        justify-content: space-between;
        align-items: space-between;
        align-content: space-between;
        flex-flow: wrap;
        flex-wrap: row;
        width: @small-four;
        height: 256px;
      }
      .small-one {
        display: flex;
        position: relative;
        flex-direction: column;
        border-radius: 8px;
        width: @one-width;
        height: 120px;
        cursor: pointer;
        img {
          position: absolute;
          width: @one-width;
          height: 120px;
          object-fit: cover;
          border-radius: 8px;
        }

        div {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          position: absolute;
          bottom: 0;
          height: 32px;
          width: @one-width;
          background: linear-gradient(
            180deg,
            rgba(62, 69, 79, 0) 0%,
            rgba(44, 49, 57, 0.6) 52%,
            #1d2127 100%
          );
          border-radius: 0px 0px 4px 4px;

          span {
            font-size: 14px;
            font-weight: 400;
            width: @one-width;
            color: #ffffff;
            line-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis; //文本溢出显示省略号
            white-space: nowrap; //文本不会换行
          }
        }

        &:hover {
          width: calc(@one-width + 5px);
          transition: all 0.1s;
          img {
            opacity: 0.6;
            width: calc(@one-width + 5px);
            height: 125px;
            transition: all 0.1s;
          }
          span {
            color: @link-color;
          }
          div {
            width: calc(@one-width + 5px);
            bottom: -5px;
            transition: all 0.1s;
          }
        }
      }
    }
  }

  &-right {
    padding-top: 10px;
    width: 30%;
    display: flex;
    .hot-list {
      border: 0;
    }
  }
}

.rjfl-tabs {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  padding-left: 80px;
  .tab {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100px;
    cursor: pointer;
    span {
      font-size: 16px;
      font-weight: 500;
      color: #93999e;
      line-height: 16px;
    }
  }

  .act {
    span {
      color: @theme-color;
    }
  }
  .act:after {
    position: absolute;
    content: " ";
    border-bottom: 2px solid @theme-color;
    width: 32px;
    bottom: -19px;
  }
}

@media screen and (max-width: 1366px) {
  @mid-one-width: 265px;

  .tutorials-left-b {
    div {
      width: calc(@mid-one-width + 10px);
    }
  }

  img {
    width: @mid-one-width !important;
  }

  .small-four {
    width: 550px !important;
  }

  .big-one {
    width: @mid-one-width !important;
    div {
      width: @mid-one-width !important;
    }
  }

  .small-one {
    width: @mid-one-width !important;
    div {
      width: @mid-one-width !important;
    }
  }
}
</style>
